<template>
    <div class="comment-editor">
        <!-- <div
            class="comment-input"
            id="textpanel"
            contenteditable
            v-html="content"
        ></div> -->
        <textarea
            class="comment-input"
            placeholder="请输入您想说的内容"
            id="textpanel"
            v-model="content"
        ></textarea>
        <div class="opration">
            <div class="send-wrap">
                <div class="emoji-panel-open" @click="showEmojiPanel">
                    <img src="@/assets/comment/emoji_sprite.png" />
                </div>
                <!-- <div class="emoji-panel-btn">
                    <img src="@/assets/comment/face.png" />

                    <el-button
                        type="primary"
                        round
                        size="small"
                        @click="saveComment"
                    >
                        回复
                    </el-button>
                </div> -->
            </div>
            <emoji-panel
                @emojiClick="appendEmoji"
                v-if="isShowEmojiPanel"
            ></emoji-panel>
        </div>
    </div>
</template>

<script>
import EmojiPanel from "./children/EmojiPanel.vue";
export default {
    name: "comment-editor",
    components: {
        EmojiPanel,
    },
    data() {
        return {
            content: "",
            isShowEmojiPanel: false,
        };
    },
    methods: {
        /* 发表评论 */
        saveComment() {
            let content = this.content.replace(/:.*?:/g, this.emoji); // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
            this.$emit("saveComment", content);
        },
        /* 打开表情框 */
        showEmojiPanel() {
            this.isShowEmojiPanel = !this.isShowEmojiPanel;
        },
        /* 生成表表情html */
        emoji(word) {
            // 生成html
            const type = word.substring(1, word.length - 1);
            return `<span class="emoji-item-common emoji-${type} emoji-size-small" ></span>`;
        },
        /* 点击表情 */
        appendEmoji(text) {
            const el = document.getElementById("textpanel");
            this.content = el.value + ":" + text + ":";

            // let value = el.innerHTML + ":" + text + ":";
            // this.content = value.replace(/:.*?:/g, this.emoji); // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
        },
    },
    watch: {
        content(value) {
            let content = value.replace(/:.*?:/g, this.emoji); // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
            this.$emit("input", content);
        },
    },
};
</script>
